<template>
    <div class="main-container">
        <div id="printTest">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>打印案例</span>
                    　　　　　　<p>锄禾日当午</p>

                    　　　　　　<p>汗滴禾下土 </p>

                    　　　　　　<p>谁知盘中餐</p>

                    　　　　　　<p>粒粒皆辛苦</p>
                </div>
            </el-card>
        </div>
        　　　　
        <div id="editor">
            <p>欢迎使用 wangEditor 富文本编辑器</p>
        </div>
        <button v-print="'#printTest'">打印</button>
    </div>
</template>

<script>
    /* eslint-disable */
    export default {
        name: "PrintDemo",
        data() {
            return {
                iframeWin: null,
                font_size: 15
            }
        },
        computed: {
            socket() {
                return this.$store.state.sysStore.socket;
            }
        },
        methods: {
            handleMessage(event) {
                // 根据上面制定的结构来解析iframe内部发回来的数据
                const data = event.data;
                console.log('vue文件接收的数据', data);
                if (data.cmd == 'success') {//自己定义一个判断是否正常
                    this.state = 'ok';
                }
            },

            printing(item) {//点击打印
                window.print();

                // let iframe = document.getElementById('frame');//获取iframe标签相当于获取了打印的区域了
                // console.log(iframe)
                // this.iframeWin.postMessage({
                //     cmd: 'getFormJson',
                //     info: {//做一下数据处理 然后存到自定义的info字段里方便获取,
                //         fontsize: this.font_size,
                //     },
                // }, '*');
                // setTimeout((res) => {
                //     if (this.state == 'ok') {
                //         iframe.contentWindow.print();//打印iframe的html页面
                //     }
                // }, 500)
            },
        },
        mounted() {
            // 引用
            var Editor = require('wangeditor');  // 使用 npm 安装
            // 创建编辑器
            var editor = new Editor('#editor');
            editor.create()
            // window.addEventListener('message', this.handleMessage);//mounted钩子函数中
            // console.log("mounted",this.$refs.iframe.contentWindow);
            // this.iframeWin = this.$refs.iframe.contentWindow; //获取iframe
        }
    }
</script>

<style scoped lang="scss">

    .main-container {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;

        .box-card {
            margin: 10px 0;
        }
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }

</style>
